.left {
    position: absolute;
    left: 0;
    top: 0;
    height: calc(100vh - 60px);
    width: 225px;
}

.keys-search {
    height: 35px;
    box-sizing: border-box;
    border-bottom: 1px solid @border;
    flow: horizontal;
    vertical-align: middle;
    padding-left: 10px;
}

.search-input-container {
    width: *;
    padding-right: 10px;
    border-right: 1px solid @border;
}

.keys-search .search-input {
    border: none;
    border-radius: 0;
    line-height: 18px;
    width: calc(100% - 60px);
}

.keys-search .search-icon {
    width: 35px;
    height: 35px;
    cursor: pointer;
    flow: horizontal;
    horizontal-align: center;
    vertical-align: middle;
}

.keys-search .search-icon:hover {
    opacity: 0.7;
}

.keys-search .search-icon:active {
    opacity: 1;
}

.keys-container {
    height: calc(100% - 35px);
    overflow: @scroll;
    position: relative;
}

.virtual-list {
    behavior: virtual-list;
    display: block;
    flow: vertical;
    overflow: hidden;
    overflow-y: @scroll;
    size: *;
    vertical-align: top;
}

.key-item-root, .key-item {
    padding: 4px 10px;
    font-size: 14px;
    line-height: 14px;
}

.key-item-root {
    padding-top: 15px;
    padding-bottom: 10px;
}

.key-item {
    margin-left: 15px;
    border-left: 1px dashed @content;
    line-height: 14px;
    position: relative;
    padding-left: 15px;
    cursor: pointer;
    color: @content;
}

.key-item .icon, .space-item .icon {
    color: @primary !important;
    padding-right: 4px !important;
}

.key-item::before {
    content: "";
    width: 15px;
    height: 0;
    position: absolute;
    left: 0;
    top: 50%;
    border-bottom: 1px dashed @content;
}

.key-item:last-child::after {
    content: "";
    width: 1px;
    height: 10px;
    position: absolute;
    left: -1px;
    bottom: 0;
    background: #fff;
}

.key-item:hover, .space-title:hover {
    background: @background;
}

.space-item {
    overflow: hidden;
    position: relative;
    margin-left: 15px;
    color: @content;
    position: relative;
    box-sizing: border-box;
}

.space-title {
    padding: 4px 15px;
    font-size: 14px;
    line-height: 14px;
}

.flag-line {
    position: absolute;
    left: 0;
    top: 10px;
    width: 15px;
    height: 0px;
    border-bottom: 1px dashed @conetent;
}

.flag-mask {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0;
    height: 11px;
    border-left: 1px dashed @content;
}

.space-root:last-child .flag-mask {
    height: 11px !important;
}

.key-item-none {
    padding: 0 15px;
    color: @disable;
    font-size: 13px;
}

.resize-line {
    position: absolute;
    left: 190px;
    top: 0;
    width: 1px;
    height: 100%;
    background: @border;
    cursor: ew-resize;
    z-index: 2;
}

.resize-line:hover {
    width: 4px;
    margin-left: -2px;
}

.right {
    position: absolute;
    right: 0;
    top: 0;
    height: calc(100vh - 60px);
    width: calc(100% - 230px);
    overflow: hidden;
}

.key-detail {
    width: 100%;
    height: 100%;
    overflow: hidden;
    flow: vertical;
}

.key-detail-actions {
    height: 35px;
    box-sizing: border-box;
    border-bottom: 1px solid @border;
    flow: horizontal;
    vertical-align: middle;
}

.key-detail-actions .action-btn {
    flow: horizontal;
    vertical-align: middle;
    height: 24px;
    padding: 0 15px 0 10px;
    margin-left: 15px;
    color: #fff;
    background: @primary !important;
    border: none;
    cursor: pointer;
}

.key-detail-actions .action-btn:hover {
    opacity: 0.8;
}

.key-detail-actions .action-btn:active {
    opacity: 1;
}

.key-detail-actions .action-btn i {
    margin-top: *;
    margin-bottom: *;
    font-size: 12px;
    line-height: 14px;
}

.key-detail-actions .action-btn span {
    margin-top: *;
    margin-bottom: *;
    line-height: 14px;
    font-size: 11px;
    display: block;
    padding-left: 3px;
}

.key-detail-container {
    width: 100%;
    size: *;
    overflow: @scroll;
    background: #fff;
}

.key-detail-container-none {
    width: 100%;
    size: *;
    overflow: hidden;
    background: #fff;
    flow: horizontal;
    horizontal-align: center;
    vertical-align: middle;
    color: @content;
}

.key-info {
    margin: 15px;
}

.key-detail-container .table {
    width: 100%;
    background: @border;
    border-spacing: 1px;
    border: 1px solid @border;
    flow: vertical;
    vertical-align: top;
}

.table .tr {
    flow: horizontal;
    border-spacing: 1px;
}

.table .tr .k {
    size: *;
    position: relative;
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    vertical-align: middle;
}

.key-copy {
    position: absolute;
    right: 8px;
    top: 8px;
    height: 100%;
    background: @light-primary;
    color: #fff;
    opacity: 0;
    transition: opacity ease-in 160ms;
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
    cursor: pointer;
    font-size: 10px;
}

.table .tr .k:hover .key-copy {
    opacity: 1;
    transition: opacity ease-in 160ms;
}

.table .tr .v {
    width: 60px;
    text-align: center;
    vertical-align: middle;
}

.table .tr .v-t {
    width: 120px;
}
.table .tr .r-v{
    width: 100%;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}
.table .th, .table .td {
    background: #ffffff;
    padding: 8px 10px;
}

.key-result {
    margin: 15px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.key-result b code {
    display: inline-block;
    padding-right: 5px;
    color: @light-primary;
}

.key-result .string {
    margin-top: 15px;
    display: block;
    background: #1e1e1e;
    color: @light-primary;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    min-height: 20vh;
    width: calc(100% - 26px);
    overflow: hidden;
    position: relative;
}

.key-result .string .copy {
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 6px 8px;
    background-color: @light-primary;
    transition: background-color ease-in-out 0.1s;
    font-size: 10px;
    width: 50px;
    text-align: center;
    opacity: 0;
    transition: opacity ease-in-out 0.16s;
    cursor: pointer;
    color: #ffffff;
    border-radius: 0 0 0 5px;
}

.key-result .string .copy:active {
    background-color: #1e1e1e;
    transition: background-color ease-in-out 0.1s;
}

.key-result .string:hover .copy {
    opacity: 1;
    transition: opacity ease-in-out 0.16s;
}

.navigation {
    flow: horizontal;
    margin-top: 15px;
}


.navigation .navigation-item {
    background: @background;
    padding: 0 10px;
    height: 25px;
    flow: horizontal;
    vertical-align: middle;
    horizontal-align: center;
    border-radius: 4px;
    margin-left: 8px;
    color: @content;
    cursor: pointer;
    transition: background ease-in-out 160ms,color ease-in-out 160ms;
}

.navigation .disable {
    color: #fff;
    background: @primary;
}
.navigation .navigation-item:hover{
    color: #fff;
    background: @primary;
    transition: background ease-in-out 160ms,color ease-in-out 160ms;
}
.list-info {
    padding: 15px;
}

.list-info .table .tr .v {
    height: *;
}
.list-info-title,.key-info-title{
    height: 30px;
    padding: 4px 0 4px 10px;
    border-left: 1px solid @border;
    background: linear-gradient(45deg,@border,#fff0);
    margin-top: -15px;
    flow: horizontal;
    vertical-align: middle;
    border-spacing: *;
}
.key-info-title{
    margin-top: 0;
}
.list-info-title span{
    display: inline-block;
    white-space: nowrap;
    word-break: keep-all;
}
.list-info-title b{
    color: @light-primary;
    display: inline-block;
    padding-right: 4px;
}

.list-info-title-action{
    flow: horizontal;
    vertical-align: middle;
}
.list-info-title-action .hash-search{
    padding: 4px 8px;
    width: 120px;
    border: 1px solid @border;
}
.list-info-title-action .btn{
    margin-left: 8px;
}
.table .tr .v-a {
    width: 90px;
    flow: horizontal;
    vertical-align: middle;
    horizontal-align: center;
    border-spacing: *;
}
.table .tr .v-s-a {
    width: 50px;
}
.table .tr .v-index {
    width: 80px;
}
.table .tr .v-field {
    width: *;
    max-width: 300px;
    position: relative;
    text-align: left;
}
.table .tr .v-field:hover .key-copy {
    opacity: 1;
}
.list-info .btn {
    background: @primary;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}
.list-tbody{
    max-height: calc(100% - 320px);
    overflow: @scroll;
    background: @border;
    border-spacing: 1px;
}
.hash-body,.set-body{
    max-height: calc(100% - 280px);
}
.hash-body{
    overflow: hidden;
}
.set-v-list{
    behavior: virtual-list;
    max-height: calc(100% - 280px);
    overflow: hidden;
    overflow-y: @scroll;
    border-spacing:1px;
    background:@border
}
.jump-to {
    flow: horizontal;
    vertical-align: middle;
    margin-left: 8px;
    color: @content;
}
.total{
    height: 25px;
    line-height: 25px;
    color: @content;
}
.jump-to input {
    width: 35px;
    padding: 2px 6px;
    margin: 0 5px;
    text-align: center;
}
.jump-to select {
    padding:4px 6px;
    border:1px solid @border;
    background:#fff;
    color: @content;
}
.jump-to select option{
    padding: 4px 0 4px 6px;
    color: @title;
}
.jump-to select option:hover{
    background: @background;
    color: @title;
}
.jump-to select option:checked{
    color: #fff;
    background: @primary;
}